<template>
    <ul class="uli">
      <li
        class="list"
        @mouseover="ListData(index)"
        @mouseleave="Leave"
        ref="lis"
        v-for="(item, index) in utilsData"
        :key="index"
      >
        {{ item }}
        <template v-if="index === 5">
          <Twoji :objs="objs" v-show="show"></Twoji>
        </template>
        <template v-if="index === 4">
          <Text v-show="text" :textData="textData" :imgs="'https://p.qqan.com/up/2021-3/16154330081055448.jpg'"></Text>
        </template>
        <template v-if="index === 3">
          <Scheme v-show="Schemes" :datas="scheme" :imges="'https://pic3.zhimg.com/v2-7967e43be573e3f4f6710a88a7eb45c8_r.jpg?source=1940ef5c'"></Scheme>
        </template>
        <template v-if="index === 2">
          <Productsd v-show="Product" :Product="Products"></Productsd>
        </template>
        <template v-if="index === 1">
        <Member v-show="member" :HuiYuan="HuiYuan"></Member>
        </template>
      </li>
    </ul>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref } from 'vue';
  import Twoji from './components/Twoji/index.vue';
  import Text from './components/text/index.vue';
  import Scheme from './components/scheme/SchemeAn.vue';
  import Productsd from './components/products/ProductsAn.vue';
  import Member from './components/member/MemberAn.vue';
  const utilsData = reactive([
    '免费模板',
    '开通会员',
    '产品服务',
    '解决方案',
    '内容中心',
    '资源与合作'
  ]);
  //资源与合作数据
  const objs = reactive({
    lisone: ['招募合伙人', '招募服务商', '招募设计师'],
    listwo: ['客户案例', '实战攻略', '白皮书', '直播视频'],
    listhree: ['帮助中心', '在线客服']
  });
  //内容与中心
  const textData = reactive({
    arrs: [
      {
        icon: 'xcx',
        title: '小程序互动营销',
        desc: '丰富的活动整合营销，快速上心活动，支持微信小程序和支付宝小程序'
      },
      {
        icon: 'saas',
        title: 'SaaS行业内容中台解决方案',
        desc: '对接6大创意工具，嵌入海量模版素材，打通产品业务闭环'
      },
      {
        icon: 'mune',
        title: 'APP运营',
        desc: '丰富的模板素材，覆盖APP拉新。促活，转化多应用场景'
      },
      {
        icon: '金融',
        title: '金融保险行业内容中台解决方案',
        desc: '批量生成年度账单、产品落地页，营销协同，赋能全员属地化营销'
      },
      {
        icon: '营销',
        title: '精准活动营销',
        desc: '访客与自有用户系统打通，客户分群运营，精准将福利匹配到高价值用户'
      },
      {
        icon: 'cart',
        title: '零售连锁行业内容中台解决方案',
        desc: '紧跟热点，快速生成营销活动内容。打通社群、小程序、门店，持续引流'
      },
      {
        icon: '门店',
        title: '门店引流',
        desc: '丰富的活动营销，提升门店客流增长，新客首单、老客复制购转化效率'
      },
      {
        icon: '视频',
        title: '融媒体内容中台解决方案',
        desc: '0研发内容供给，创新公益活动，自有品牌曝光，无第三方广告标识'
      }
    ]
  });
  // 方案数据
  const scheme = reactive({
      arrs:['银行保险','文化传媒','企业服务','兴趣教育','政府融媒','医疗健康','婚庆','旅游','物业'],
      secharr:['会议活动营销','企业微信运营','活动策划','招聘','方案模版']
  });
  //产品数据
   const Products = reactive({
      ProductsData:[
         {
          titles:'创意设计',
          child:[
            {
              title:'在线编辑',
              icon:'编辑',
             arrs:['H5','互动','海报','电子画册','长页','视频','表单','数字人']
            },
            {
              title:'AI创作',
              icon:'AI',
            arrs:['AI文案','AI问卷']
            },
            {
              title:'作图工具',
              icon:'画板',
           arrs:[
            '只能驱图','批量水印','拼图','图片改大小','艺术二维码','图片加文字',
            '海报批量制作','水印相机','H5批量制作','证件照','图片美化'
          ]
            },
          ]
         
         },
         {
          titles:'内容协作',
          child:[
            {
              title:'官方创意资源',
              icon:'灯泡',
             arrs:['模版中心','素材中心','版权保障']
            },
            {
              title:'企业内容中心',
              icon:'内容',
            arrs:['企业内容上传','企业内容协作','内容合规保障']
            },
          ]
         },
         {
          titles:'推广获客',
          child:[
            {
              title:'活动运营',
              icon:'转盘',
             arrs:['互动抽奖','红包营销','投票评选','互动游戏','考试答题','报名','表单','数字人','调研问卷','签到']
            },
            {
              title:'推广工具',
              icon:'纸飞机',
            arrs:['智能分发','公众号涨粉','全员分发','生成短连接','短信群发','嵌入小程序']
            },

          ]
         },
         {
          titles:'私域运营',
          child:[
            {
              title:'企微运营',
              icon:'企业微信',
             arrs:['获客活码','智能雷达','客户群发','企微客户管理','朋友圈群发']
            },
            {
              title:'收入转化',
              icon:'收入',
           arrs:[
            '打赏','预约报名','收款','商品管理','优惠券','线索客户管理'
          ]
            },
          ]
         }
      ],
  });
  //开通会员数据
  const HuiYuan = reactive({
    MemberData:[
      {
        title:'设计个人版',
        img:'https://img.zcool.cn/community/017d3d55b6d5e432f875251f1487c2.jpg@1280w_1l_2o_100sh.jpg',
        chidl:[
          '适合个人使用','版权授权','个人模板使用'
        ]
      },
      {
        title:'设计专业版',
        img:'https://img.zcool.cn/community/01c33255b6d52a6ac725ca509df41f.jpg@1280w_1l_2o_100sh.jpg',
        chidl:[
         '适合个体户、小威企业','版权授权：企业商用','全场模板免费用'
        ]
      },
      {
        title:'营销旗舰版',
         img:'https://www.keaitupian.cn/cjpic/frombd/0/253/1442366875/2166259507.jpg',
        chidl:[
          '适合金融、教育、传媒、政府等大型企事业单位使用','版权授权：企业商用','支持多人协作'
        ]
      },
      {
        title:'内容中心',
        img:'https://img.zcool.cn/community/01e34255b6d5e832f875251ffbec99.jpg@1280w_1l_2o_100sh.jpg',        
        chidl:[
          '适合具有研发能力的大型企业或平台使用','API无缝对接自有产品/小程序等','3分钟把非常秀搬回家'
        ]
      },
    ]
  });
  const show = ref(false);
  const text = ref(false);
  const Schemes = ref(false);
  const Product = ref(false);
  const member = ref(false);
  const list = ref();
  //鼠标划入
  const ListData = (index: number) => {
    utilsData.forEach((item, j) => {
      if (j === index) {
        list.value = item;
      }
    });
    switch (list.value) {
      case '资源与合作':
        show.value = true;
        break;
        case '内容中心':
        text.value = true;
        break;
        case '解决方案':
        Schemes.value = true;
        break;
        case '产品服务':
        Product.value = true;
        break;
        case '开通会员':
        member.value = true;
        break;
      default:
        break;
    }
  };
  //鼠标离开
  const Leave = () => {
    show.value = false;
    text.value = false;
    Schemes.value = false;
    Product.value = false;
    member.value = false;
  
  };  
  
  </script>
  <style scoped lang="scss">
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .uli {
    margin-left: 150px;
    display: flex;
    align-items: center;
    position: relative;

  }
  .uli > li {
    width: 80px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    cursor: pointer;
  }
  .uli > li:hover {
    color: #1261ff;
  }
  element.style {
    top: 85px !important;
    z-index: 99999 !important;
  }
  </style>
  